<!-- 左侧导航栏公共模板 -->
<div id="sidebar" class="sidebar">
    <!-- Logo区域 -->
    <div class="flex flex-col items-center py-6 px-4 border-b border-blue-400 border-opacity-30">
        <img id="sidebar-logo" src="/static/logo.png" alt="Logo" class="w-32 h-16 object-contain cursor-pointer transition-all duration-300 hover:scale-105">
        <div class="text-white text-sm mt-2 font-medium tracking-wide">浪起BI-ETL平台</div>
    </div>

    <!-- 账套选择区域 -->
    <div class="px-4 py-4">
        <label class="text-blue-100 text-xs font-semibold uppercase tracking-wider mb-2 block">账套选择</label>
        <select id="account-select" class="w-full px-3 py-2.5 text-sm bg-blue-700 border border-blue-500 rounded-lg text-white placeholder-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-300 focus:border-transparent transition-all duration-200 hover:bg-blue-600">
            <option value="" class="bg-blue-700 text-white">请选择账套</option>
        </select>
    </div>

    <!-- 导航菜单区域 -->
    <nav class="flex-1 px-2 py-4">
        <ul class="space-y-1">
            <li>
                <a href="/" class="flex items-center px-3 py-3 text-sm font-medium text-white rounded-lg hover:bg-blue-700 hover:bg-opacity-50 transition-all duration-200 group">
                    <i class="fas fa-database mr-3 text-blue-200 group-hover:text-white transition-colors duration-200"></i>
                    <span class="truncate">收入数据导入</span>
                </a>
            </li>
            <li>
                <a href="/cost.html" class="flex items-center px-3 py-3 text-sm font-medium text-white rounded-lg hover:bg-blue-700 hover:bg-opacity-50 transition-all duration-200 group">
                    <i class="fas fa-coins mr-3 text-blue-200 group-hover:text-white transition-colors duration-200"></i>
                    <span class="truncate">成本数据导入</span>
                </a>
            </li>
            <li>
                <a href="/zyb.html" class="flex items-center px-3 py-3 text-sm font-medium text-white rounded-lg hover:bg-blue-700 hover:bg-opacity-50 transition-all duration-200 group">
                    <i class="fas fa-star mr-3 text-blue-200 group-hover:text-white transition-colors duration-200"></i>
                    <span class="truncate">作业帮</span>
                </a>
            </li>
        </ul>
    </nav>

    <!-- 折叠提示 -->
    <div class="px-4 py-3 border-t border-blue-400 border-opacity-30 transition-all duration-300">
        <div class="text-blue-200 text-xs text-center opacity-70">
            <i class="fas fa-chevron-left mr-1"></i>
            点击logo折叠菜单
        </div>
    </div>
    
    <!-- 收缩状态下的提示 -->
    <div id="expand-tip" class="hidden fixed top-4 left-1/2 transform -translate-x-1/2 bg-blue-500 text-white text-sm px-4 py-2 rounded-lg shadow-lg z-50 transition-all duration-300 hover:bg-blue-600 cursor-pointer">
        <i class="fas fa-arrow-left mr-1"></i>
        侧边栏已折叠，点击此处展开
    </div>
    
    <script>
        // 显示/隐藏展开提示
        document.addEventListener('DOMContentLoaded', () => {
            const sidebar = document.getElementById('sidebar');
            const expandTip = document.getElementById('expand-tip');
            
            // 监听侧边栏折叠状态变化
            const observer = new MutationObserver(mutations => {
                mutations.forEach(mutation => {
                    if (mutation.attributeName === 'class') {
                        if (sidebar.classList.contains('collapsed')) {
                            expandTip.classList.remove('hidden');
                            // 将提示添加到body中，确保在顶层
                            document.body.appendChild(expandTip);
                        } else {
                            expandTip.classList.add('hidden');
                        }
                    }
                });
            });
            
            // 开始观察
            if (sidebar && expandTip) {
                observer.observe(sidebar, { attributes: true });
                
                // 初始检查
                if (sidebar.classList.contains('collapsed')) {
                    expandTip.classList.remove('hidden');
                }
                
                // 点击提示也能展开侧边栏
                expandTip.addEventListener('click', () => {
                    sidebar.classList.remove('collapsed');
                    const content = document.getElementById('content');
                    if (content) {
                        content.classList.remove('collapsed');
                    }
                });
            }
        });
    </script>
</div>

<style>
    /* 侧边栏基础样式 */
    /* 侧边栏基础样式 */
    #sidebar {
        background-color: #1e40af; /* 深蓝色背景 */
        width: 240px;
        transition: width 0.3s ease-in-out, transform 0.3s ease-in-out;
    }
    
    /* 响应式样式优化 */
    @media screen and (max-width: 768px) {
        #sidebar {
            position: fixed;
            top: 0;
            left: 0;
            height: 100vh;
            z-index: 1000;
            transform: translateX(-100%);
            transition: transform 0.3s ease-in-out;
        }
        
        #sidebar.mobile-open {
            transform: translateX(0);
        }
        
        #sidebar.mobile-open::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, 0.5);
            z-index: -1;
        }
        
        /* 移动端菜单按钮 */
        .mobile-menu-toggle {
            display: block;
            position: fixed;
            top: 1rem;
            left: 1rem;
            z-index: 1001;
            background: #3B82F6;
            color: white;
            border: none;
            border-radius: 0.375rem;
            padding: 0.5rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        /* 移动端关闭按钮 */
        .mobile-close-btn {
            display: block;
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: transparent;
            border: none;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
        }
    }
    
    @media screen and (min-width: 769px) {
        .mobile-menu-toggle,
        .mobile-close-btn {
            display: none;
        }
    }
    
    /* 当前激活链接样式 */
    #sidebar nav a.active {
        background-color: rgba(59, 130, 246, 0.35);
    }
    #sidebar nav a.active span,
    #sidebar nav a.active i {
        color: #FDE68A !important;
    }
    
    /* 折叠状态样式 */
    #sidebar.collapsed {
        width: 60px;
        transition: width 0.3s ease-in-out;
    }
    
    .sidebar.collapsed .text-white,
    .sidebar.collapsed .text-blue-100,
    .sidebar.collapsed .text-blue-200,
    .sidebar.collapsed span,
    .sidebar.collapsed label,
    .sidebar.collapsed select {
        display: none;
    }
    
    .sidebar.collapsed .w-32 {
        width: 2.5rem;
        height: 2.5rem;
    }
    
    .sidebar.collapsed .py-6 {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    
    .sidebar.collapsed .px-3,
    .sidebar.collapsed .px-4 {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    .sidebar.collapsed .mr-3 {
        margin-right: 0;
    }
    
    .sidebar.collapsed .space-y-1 {
        gap: 0.25rem;
    }
    
    .sidebar.collapsed > div,
    .sidebar.collapsed nav {
        transition: all 0.3s ease-in-out;
    }
    
    /* 为侧边栏添加过渡效果 */
    .sidebar {
        transition: width 0.3s ease-in-out, transform 0.3s ease-in-out;
    }
    
    /* 账套选择区域在收缩状态下的处理 */
    .sidebar.collapsed #account-select {
        position: absolute;
        left: 60px;
        top: 70px;
        z-index: 1000;
        display: none;
    }
    
    .sidebar.collapsed:hover #account-select {
        display: block;
    }
</style>

<script>
        // 侧边栏折叠功能（事件委托，跨页面稳定）
        document.addEventListener('DOMContentLoaded', function() {
            const sidebar = document.getElementById('sidebar');
            const content = document.getElementById('content');
            const expandTip = document.getElementById('expand-tip');
        
            // 监听侧边栏折叠状态变化
            const observer = new MutationObserver(mutations => {
                mutations.forEach(mutation => {
                    if (mutation.attributeName === 'class') {
                        if (sidebar.classList.contains('collapsed')) {
                            expandTip && expandTip.classList.remove('hidden');
                            document.body.appendChild(expandTip);
                        } else {
                            expandTip && expandTip.classList.add('hidden');
                        }
                    }
                });
            });
            if (sidebar) {
                observer.observe(sidebar, { attributes: true });
            }
        
            // 使用事件委托处理 logo 点击
            document.addEventListener('click', function(e) {
                const clickedLogo = e.target.closest('#sidebar-logo');
                if (!clickedLogo) return;
                if (!sidebar) return;
                if (window.innerWidth <= 768) {
                    sidebar.classList.remove('mobile-open');
                } else {
                    sidebar.classList.toggle('collapsed');
                    if (content) content.classList.toggle('collapsed');
                }
            });
        });
</script>

<script>
    // 移动端菜单控制
    function setupMobileMenu() {
        const sidebar = document.getElementById('sidebar');
        const content = document.getElementById('content');
        
        // 创建移动端菜单按钮
        if (window.innerWidth <= 768 && !document.querySelector('.mobile-menu-toggle')) {
            const menuBtn = document.createElement('button');
            menuBtn.innerHTML = '<i class="fas fa-bars"></i>';
            menuBtn.className = 'mobile-menu-toggle';
            menuBtn.onclick = function() {
                sidebar.classList.add('mobile-open');
            };
            document.body.appendChild(menuBtn);
            
            // 创建移动端关闭按钮
            const closeBtn = document.createElement('button');
            closeBtn.innerHTML = '<i class="fas fa-times"></i>';
            closeBtn.className = 'mobile-close-btn';
            closeBtn.onclick = function() {
                sidebar.classList.remove('mobile-open');
            };
            sidebar.appendChild(closeBtn);
        }
        
        // 点击遮罩关闭菜单
        sidebar.addEventListener('click', function(e) {
            if (e.target === sidebar && window.innerWidth <= 768) {
                sidebar.classList.remove('mobile-open');
            }
        });
    }

    // 响应式处理
    function handleResize() {
        const sidebar = document.getElementById('sidebar');
        if (window.innerWidth > 768) {
            sidebar.classList.remove('mobile-open');
            document.querySelectorAll('.mobile-menu-toggle, .mobile-close-btn').forEach(btn => {
                if (btn) btn.remove();
            });
        } else {
            setupMobileMenu();
        }
    }

    // 加载账套
    function loadAccounts() {
        fetch('/api/accounts')
            .then(response => response.json())
            .then(data => {
            const select = document.getElementById('account-select');
            select.innerHTML = '<option value="">请选择账套</option>';            
            data.forEach(account => {
                // 使用对象的属性而不是整个对象
                select.innerHTML += `<option value="${account.id}" data-id="${account.acctId}">${account.name}</option>`;
                });
            })
            .catch(error => console.error('Error loading accounts:', error));
    }

    // 高亮当前链接
    function highlightActiveLink() {
        const links = document.querySelectorAll('#sidebar nav a');
        const currentPath = window.location.pathname;
        const normalizedCurrent = (currentPath === '/index.html') ? '/' : currentPath;
        links.forEach(a => {
            const linkPath = new URL(a.getAttribute('href'), window.location.origin).pathname;
            const normalizedLink = (linkPath === '/index.html') ? '/' : linkPath;
            a.classList.toggle('active', normalizedLink === normalizedCurrent);
        });
    }

    // 页面加载时初始化
    document.addEventListener('DOMContentLoaded', function() {
        loadAccounts();
        setupMobileMenu();
        window.addEventListener('resize', handleResize);
        highlightActiveLink();
    });
</script>